<template>
    <div class="resume-wrapper main">
        <nav-bar>
            <template v-slot:back>
                <back-button/>
            </template>
            <template v-slot:title>
                                <switch-ctrl :datas="[{name: '任免表'}, {name: '关系图谱'}]" @item-click="itemClick"/>
<!--                <switch-ctrl :datas="[{name: '任免表'}]" @item-click="itemClick"/>-->

                <span class="tel" v-if="tel">
                    <a :href="`tel:${tel}`">{{tel}}</a>
                </span>
            </template>
            <template v-slot:right>


                <attent-button v-if="detail.IDCardNO" :id="detail.IDCardNO"/>
            </template>
        </nav-bar>
        <div v-if="select === 0" class="resume-content">
            <div>
                <h1>干 部 任 免 审 批 表</h1>
                <table cellspacing="0" cellpadding="0">
                    <colgroup>
                        <col width="9%">
                        <col width="12.5%">
                        <col width="12.5%">
                        <col width="15%">
                        <col width="12%">
                        <col width="20%">
                        <col width="*">
                    </colgroup>
                    <tbody>
                    <tr>
                        <td colspan="1"><span class="right1em">姓</span>名</td>
                        <td colspan="1" v-html="transform(detail.PersionName)"
                            :style="{fontSize: fontSize(detail.PersionName, 10)}"></td>
                        <td colspan="1"><span class="right1em">性</span>别</td>
                        <td colspan="1">{{detail.Sex | sex}}</td>
                        <td colspan="1">出生年月<br>(岁)</td>
                        <td colspan="1">{{detail.Birthday | dateFormat}}<br>({{detail.Birthday | age}}岁)</td>
                        <td colspan="1" rowspan="4" style="padding: 0;">
                            <img :src="photo" style="display: inline-block; vertical-align: middle;" width="100%"
                                 height="200"/>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="right1em">民</span>族</td>
                        <td colspan="1" v-html="transform(detail.EthnicEText)"
                            :style="{fontSize: fontSize(detail.EthnicEText, 10)}"></td>
                        <td><span class="right1em">籍</span>贯</td>
                        <td v-html="transform(detail.NativePlace)"
                            :style="{fontSize: fontSize(detail.NativePlace, 10)}"></td>
                        <td>出 生 地</td>
                        <td v-html="transform(detail.BirthPlace)"
                            :style="{fontSize: fontSize(detail.BirthPlace, 10)}"></td>
                    </tr>
                    <tr>
                        <td><span class="right1em">入</span>党<br><span class="right1em">时</span>间</td>
                        <td colspan="1" :style="{fontSize: fontSize(detail.JoinPartyTime, 12)}">
                            {{detail.JoinPartyTime}}
                        </td>
                        <td>参加工<br>作时间</td>
                        <td>{{detail.StartingWorkDate | dateFormat}}</td>
                        <td>健康状况</td>
                        <td v-html="transform(detail.HealthCondition)"
                            :style="{fontSize: fontSize(detail.HealthCondition, 10)}"></td>
                    </tr>
                    <tr>
                        <td>专业技<br>术职务</td>
                        <td colspan="2" v-html="transform(detail.SkillTitle)"
                            :style="{fontSize: fontSize(detail.HealthCondition, 20)}"></td>
                        <td>熟悉专业<br>有何专长</td>
                        <td colspan="2" v-html="transform(detail.Specialty)"
                            :style="{fontSize: fontSize(detail.Specialty, 20)}"></td>
                    </tr>
                    <tr>
                        <td colspan="1" rowspan="2"><span class="right1em">学</span>历<br><span class="right1em">学</span>位
                        </td>
                        <td colspan="1">全日制<br><span class="right1em">教</span>育</td>
                        <td colspan="2"><!-------------------------------------------------------------->
                            <span v-html="transform(detail.HighestFulltimeAcademicQualification)"
                                  :style="{fontSize: fontSize(detail.HighestFulltimeAcademicQualification, 10)}"></span>
                            <br>
                            <span v-html="transform(detail.HighestFulltimeDegreeLevel)"
                                  :style="{fontSize: fontSize(detail.HighestFulltimeDegreeLevel, 10)}"></span>
                        </td>
                        <td colspan="1">毕业院校<br>系及专业</td>
                        <td colspan="2" :style="{fontSize: fontSize(detail.FulltimeSchoolAndMajor, 32)}"
                            v-html="transform(detail.FulltimeSchoolAndMajor)"></td>
                    </tr>
                    <tr>
                        <td colspan="1"><span class="right1em">在</span>职<br><span class="right1em">教</span>育</td>
                        <td colspan="2">
                            <span v-html="transform(detail.HighestInServiceAcademicQualification)"
                                  :style="{fontSize: fontSize(detail.HighestInServiceAcademicQualification, 10)}"></span>
                            <br>
                            <span v-html="transform(detail.HighestInServiceDegreeLevel)"
                                  :style="{fontSize: fontSize(detail.HighestInServiceDegreeLevel, 10)}"></span>
                        </td>
                        <td colspan="1">毕业院校<br>系及专业</td>
                        <td colspan="2" :style="{fontSize: fontSize(detail.InServiceSchoolAndMajor, 32)}"
                            v-html="transform(detail.InServiceSchoolAndMajor)"></td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <span class="right1em">现</span>
                            <span class="right1em">任</span>
                            <span class="right1em">职</span>务
                        </td>
                        <td colspan="5" style="text-align: left;"
                            :style="{fontSize: fontSize(detail.JobTitleDetail, 33)}"
                            v-html="transform(detail.JobTitleDetail)"></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span class="right1em">拟</span>
                            <span class="right1em">任</span>
                            <span class="right1em">职</span>务
                        </td>
                        <td colspan="5" style="text-align: left;"></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span class="right1em">拟</span>
                            <span class="right1em">免</span>
                            <span class="right1em">职</span>务
                        </td>
                        <td colspan="5" style="text-align: left;"></td>
                    </tr>


                    <tr style="height:200px">
                        <td>
                            <p style="margin-bottom: 50px;"><span>简</span></p>
                            <p><span>历</span></p>
                        </td>
                        <td colspan="6" style="vertical-align: top;">
                            <div style="text-align: left; display: flex;" v-for="(item, i) in resumeList" :key="i">
                                <p style="width: 160px; white-space: nowrap;">{{item.time}}</p>
                                <p style="flex: 1;">{{item.label}}</p>
                            </div>
                        </td>
                    </tr>


                    </tbody>
                </table>
                <table cellspacing="0" cellpadding="0">
                    <colgroup>
                        <col width="9%">
                        <col width="12.5%">
                        <col width="12.5%">
                        <col width="38px">
                        <col width="12%">
                        <col width="20%">
                        <col width="*">
                    </colgroup>
                    <tbody>
                    <tr>
                        <td><p>奖</p>
                            <p>惩</p>
                            <p>情</p>
                            <p>况</p>
                        </td>
                        <td colspan="6" style="text-align: left;">{{detail.RewardsAndPunishment}}</td>
                    </tr>

                    <tr>
                        <td>
                            <p>年核</p>
                            <p>度结</p>
                            <p>考果</p>
                        </td>
                        <td colspan="6" style="text-align: left;">{{detail.AnnualAssessment}}</td>
                    </tr>

                    <tr>
                        <td><p>任</p>
                            <p>免</p>
                            <p>理</p>
                            <p>由</p>
                        </td>
                        <td colspan="6" style="text-align: left;"></td>
                    </tr>


                    <tr>
                        <td :rowspan="family.length + 1">
                            <p><span>家 </span></p>
                            <p><span>庭 </span></p>
                            <p><span>主 </span></p>
                            <p><span>要 </span></p>
                            <p><span>成 </span></p>
                            <p><span>员 </span></p>
                            <p><span>及 </span></p>
                            <p><span>重 </span></p>
                            <p><span>要 </span></p>
                            <p><span>社 </span></p>
                            <p><span>会 </span></p>
                            <p><span>关 </span></p>
                            <p><span>系</span></p></td>
                        <td><p><span class="right1em">称</span>谓</p>
                        </td>
                        <td><p><span class="right1em">姓</span>名</p>
                        </td>
                        <td>
                            <p>年<br>龄</p>
                        </td>
                        <td><p><span class="right1em">政</span>治</p>
                            <p><span class="right1em">面</span>貌</p>
                        </td>
                        <td colspan="2">
                            <p><span>工 作 单 位 及 职 务</span></p>
                        </td>
                    </tr>
                    <tr v-for="(item, i) in family" :key="i">
                        <td><p><span v-html="item.Relation"></span></p></td>
                        <td><p><span v-html="transform(item.PersionName)"></span></p></td>
                        <td><p><span>{{item.Birthday | age}}</span></p></td>
                        <td><p><span v-html="item.PoliticsStatus"></span></p></td>
                        <td colspan="2">
                            <p style="text-align: left;"><span :style="{fontSize: fontSize(item.JobInfo, 40)}"
                                                               v-html="transform(item.JobInfo)"></span></p>
                        </td>
                    </tr>

                    <tr>
                        <td style="padding: 10px 0;"><p><span>呈</span></p>
                            <p><span>报</span></p>
                            <p><span>单</span></p>
                            <p><span>位</span></p>
                        </td>
                        <td colspan="6">
                            <div style="position: relative; top: 0; left: 0;">
                                <p style="position: absolute; top: 20px; right: 15px;">
                                    <span class="right1em">年</span>
                                    <span class="right1em">月</span>日
                                </p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 10px 0;">
                            <p>审意</p>
                            <p style="padding-right: 1em;">批</p>
                            <p style="padding-right: 1em;">机</p>
                            <p>关见</p>
                        </td>
                        <td colspan="3">
                            <div style="position: relative; top: 0; left: 0;">
                                <p style="position: absolute; top: 0; right: 5px;">
                                    <span>（盖章）</span>
                                    <br>
                                    <span class="right1em">年</span>
                                    <span class="right1em">月</span>日
                                </p>
                            </div>
                        </td>
                        <td>
                            <p><span>行任</span></p>
                            <p><span>政免</span></p>
                            <p><span>机意</span></p>
                            <p><span>关见</span></p>
                        </td>
                        <td colspan="2">
                            <div style="position: relative; top: 0; left: 0;">
                                <p style="position: absolute; top: 0; right: 5px;">
                                    <span>（盖章）</span>
                                    <br>
                                    <span class="right1em">年</span>
                                    <span class="right1em">月</span>日
                                </p>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <p style="text-align: left;"><span>填表人：</span></p>
            </div>
        </div>
        <div v-if="select === 1" class="base-content">
            <member-atlas :listdata="atlas.listdata"
                          :links="atlas.links"
                          :categories="atlas.categories"
                          @node-click="nodeClick"/>
        </div>


        <div class="pageCtr pageCtr-prev" v-if="pageCtr.prev.show" @click="prevClick">{{pageCtr.prev.text}}</div>
        <div class="pageCtr pageCtr-next" v-if="pageCtr.next.show" @click="nextClick">{{pageCtr.next.text}}</div>
    </div>
</template>

<script>
    import {navbarMixin, filtersMixin, switchctrlMixin, methodsMixin} from '../../mixins';
    import MemberAtlas from "./child-comp/MemberAtlas";
    import AttentButton from "./child-comp/AttentButton";
    import {detail, getFamilyMembers} from '../../api/resume';
    import {GetPeopleDetailInfo, GetFamilyMembers, GetTelNOByPersionID} from "../../common/data-base/DataInterface";
    import {IO} from "../../common/plus/io";

    var CryptoJS = require("crypto-js");
    import CryptoFile from "../../common/data-base/CryptoFile";

    let aCryptoFile = new CryptoFile();

    export default {
        name: "Resume",
        mixins: [navbarMixin, filtersMixin, switchctrlMixin, methodsMixin],
        components: {
            MemberAtlas,
            AttentButton
        },
        data() {
            return {
                select: 0,
                detail: {
                    Resume: ''
                },
                tel: '',
                photo: '',
                family: [],
                // 关系图谱
                atlas: {
                    nodeSize: 65,
                    listdata: [],
                    links: [],
                    categories: [
                        {name: 0, color: '#ED7961'},
                        {name: 1, color: '#62C6F8'},
                        {name: 2, color: '#667aed'}
                    ]
                },
                pageCtr: {
                    prev: {
                        id: '',
                        text: '上一页',
                        show: false
                    },
                    next: {
                        id: '',
                        text: '下一页',
                        show: false
                    }
                }
            }
        },
        computed: {
            // 任免表简历
            resumeList() {
                return this.detail.Resume.split('\n').map(item => {
                    let ary = item.split('  ');
                    // 没有时间
                    if (ary.length === 1) {
                        ary.unshift('');
                    }
                    return {
                        time: ary[0],
                        label: ary[ary.length - 1]
                    };
                });
            }
        },
        created() {
            console.log(this.$store.state.pagectrModule.pagectrList);
            const id = this.$route.query.PersionID;
            this.init(id);
        },
        methods: {
            init(id) {
                this.initData(id);
                this.initPhoto(id);
                this.initPagectr(id);
            },
            // 点击上一页
            prevClick() {
                const id = this.pageCtr.prev.id;
                this.init(id);
            },
            // 点击下一页
            nextClick() {
                const id = this.pageCtr.next.id;
                this.init(id);
            },
            // 初始化翻页
            initPagectr(id) {
                let list = this.$store.state.pagectrModule.pagectrList,
                    l = list.length;
                // 当前索引
                let index = list.indexOf(id);

                if (l <= 1) {
                    this.pageCtr.prev.show = false;
                    this.pageCtr.next.show = false;
                }
                // 第一个
                else if (index === 0 && l !== 1) {
                    this.pageCtr.prev.show = false;
                    this.pageCtr.next.show = true;
                    this.pageCtr.next.id = list[index + 1];
                }
                // 最后一个
                else if (index !== 0 && index === l - 1) {
                    this.pageCtr.prev.show = true;
                    this.pageCtr.prev.id = list[index - 1];
                    this.pageCtr.next.show = false;
                }
                // 其他
                else {
                    this.pageCtr.prev.show = true;
                    this.pageCtr.prev.id = list[index - 1];
                    this.pageCtr.next.show = true;
                    this.pageCtr.next.id = list[index + 1];
                }
            },
            fontSize(str, n) {
                if (!str) {
                    return '1em';
                }

                let l = str.length;
                if (l > n) {
                    return `${n / l}em`;
                }

                return '1em';
            },
            async initData(id) {

                if (this.$store.state.plusAlready) {
                    const person = await GetPeopleDetailInfo(id);
                    const members = await GetFamilyMembers(id);
                    const obj = await GetTelNOByPersionID(id);
                    if (obj.length > 0) {
                        const {telNO} = obj[0];
                        this.tel = telNO;
                        console.log(this.tel);
                    }
                    console.log(JSON.stringify(person[0]));
                    console.log(members);
                    this.initResumeData(person[0], members);
                    this.initAtlasData(person[0], members);
                } else {
                    const person = detail(id);
                    const members = getFamilyMembers(id);
                    this.initResumeData(person, members);
                    this.initAtlasData(person, members);
                }
            },
            itemClick(item, i) {
                (this.select !== i) && (this.select = i);
            },
            getBase64(path) {
                if (path === '') {
                    return ''
                }
                var decrypted = aCryptoFile.decrypt(path);
                let xyz = decrypted.toString(CryptoJS.enc.Utf8);
                let jj = "data:image/jpeg;base64,";

                return jj + xyz;
            },
            // 获取图片
            initPhoto(PersionID) {
                if (this.$store.state.plusAlready) {
                    IO.getImage(PersionID, (path) => {
                        this.photo = this.getBase64(path);
                        console.log('图片读取成功');
                        console.log(this.photo);
                    });
                } else {
                    this.photo = require(`../../assets/photos/${PersionID}.jpg`);
                }
            },
            /*任免表*/
            initResumeData(person, members) {
                this.detail = person;
                // members = members.filter(item => item.Birthday !== '');
                members = members.sort((a, b) => a.Sort * 1 - b.Sort * 1);
                this.family = members.filter(item => item.IsInResumeFile === 'true');
                while (this.family.length < 6) {
                    this.family.push({
                        PersionName: '&nbsp;',
                        Relation: '',
                        Birthday: '',
                        PoliticsStatus: '',
                        JobInfo: '',
                        Sort: ''
                    });
                }
            },
            /*人员图谱*/
            initAtlasData(person, members) {
                let p = {...person, Sort: 0};
                const members1 = members.filter(item => item.PersionID);
                const members2 = members.filter(item => !item.PersionID);

                this.setNodeData([p], 0);
                this.setNodeData(members1, 1);
                this.setNodeData(members2, 2);

                this.setLinkData(members1, p.Sort);
                this.setLinkData(members2, p.Sort);
            },
            setNodeData(persons, n) {
                persons.forEach((person, i) => {
                    this.atlas.listdata.push({
                        x: i * 50,
                        y: this.atlas.nodeSize + i * 10,
                        "name": person.Sort,
                        "showName": person.PersionName,
                        "symbolSize": this.atlas.nodeSize,
                        "category": n,
                        // 是否有拖拽力，
                        "draggable": false,
                        formatter: function (params) {
                            return params.data.showName
                        }
                    });
                });
            },
            setLinkData(persons, target) {
                persons.forEach(person => {
                    this.atlas.links.push({
                        "source": person.Sort,
                        "target": target,
                        "value": person.Relation,
                        lineStyle: {
                            color: 'source'
                        }
                    });
                });
            },
            nodeClick(param) {
                console.log(param);
            }

        }
    };
</script>

<style scoped lang="scss">
    @import "../../assets/scss/base";

    .resume-wrapper {

        .tel {
            margin-left: 10px;
            display: inline-block;
            vertical-align: middle;
            padding: 8.5px;
            border-radius: 5px;
            color: $base-color;
            background-color: white;
            font-size: 16px;

            a {
                color: inherit;
            }
        }

        .resume-content {
            width: 100%;
            height: calc(100% - #{$navbar-height});
            padding: 20px 120px;
            font-size: 18px;
            overflow: auto;

            > div {
                border-radius: $border-radius;
                box-shadow: 10px 8px 10px 5px #d3d3d3;
                padding: 10px;

                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 10px 0;

                    &:first-of-type {
                        margin-bottom: 0;
                    }

                    &:last-of-type {
                        margin-top: 0;

                        > tbody > tr:first-of-type > td {
                            border-top: 0;
                        }
                    }

                    > tbody > tr > td {
                        height: 50px;
                        border: 1px solid;
                        vertical-align: middle;
                    }
                }
            }

        }

        .right1em {
            margin-right: 1em;
        }

        .pageCtr {
            position: fixed;
            top: $navbar-height + 20px;
            background-color: $base-color;
            color: $base-font-color;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: $border-radius;
            display: flex;
            justify-content: center;
            align-items: center;

            &.pageCtr-prev {
                left: 10px;
            }

            &.pageCtr-next {
                right: 10px;
            }
        }
    }
</style>
